<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
  	$(function(){
  		
  		$("#btn").click(function(){
  			//拼你要放送的内容
  			load("servicename=Saxon&name=1");
  		});
		//初始化
  		load("servicename=Saxon&name=1");
		
		//这个ajax是负责table的加载
  		function load(str){
  			$.ajax({
  				url:"ServiceProcessor",
  				type: "post",
  				data: str,
  				dataType: "json",
  				success: function(data){
  					//把String转成json格式
  					var jsons = eval('('+data.json+')');
  					$("#table1").html("<tr><td>编号</td><td>姓名</td><td>密码</td></tr>");
					//jquery的循环
  					$.each(jsons,function(key,value){
						$("#table1").append("<tr align='center'><td>"+value.id+"</td><td>"+value.username+"</td><td>"+value.userpass+"</td></tr>");
					});
  				}
  			});
  		 }
		
		
		$("#btn2").click(function(){
			//拼你要放送的内容
			var data = "servicename=UserInsert&username="+$("#username").val()+"&userpass="+$("#userpass").val();
			AjaxIUD(data);
		});
		
		$("#btn3").click(function(){
			var data = "servicename=UserUpdate&id="+$("#updateId").val()+"&username="+$("#updateUserName").val()+"&userpass="+$("#updateUserPass").val();
			//alert(data)
			AjaxIUD(data);
		});
		
		$("#updateId").blur(function(){
			var data = "servicename=UserUpdateLoad&id="+$(this).val();
			AjaxUpdateAdd(data);
		});
		
		$("#btn4").click(function(){
			var data = "servicename=UserDelete&id="+$("#deleteId").val();
			//alert(data);
			AjaxIUD(data);
		});
		
		
		//这个是ajax是负责增删改的
		function AjaxIUD(str){
			$.ajax({
  				url:"ServiceProcessor",
  				type: "post",
  				data: str,//{name:name,pass:pass}   "name=aa&pass=cc&"
  				dataType: "json",
  				success: function(data){
  					if(data.result == 1){
  						alert("执行成功,请更新");
  					}else{
  						alert("执行失败");
  					}
  				}
  			});
		}
		
		//这个是ajax是负责在页面加载数据
		function AjaxUpdateAdd(str){
			$.ajax({
  				url:"ServiceProcessor",
  				type: "post",
  				data: str,
  				dataType: "json",
  				success: function(data){
  					var jsons = eval('('+data.json+')');
  					$.each(jsons,function(key,value){
  						$("#updateUserName").val(value.username);
  						$("#updateUserPass").val(value.userpass);
  					});
  				}
  			});
		}
		
		
		
  	});
  	
  </script>
  
  </head>
  
  <body>   
  <input type="button" id="btn" value="更新"> 
	<table cellpadding="0" cellspacing="0" border="1" id="table1">
	</table>
    <br>
    Insert
    <table cellpadding="0" cellspacing="0" border="1">
    	<tr>
    		<td>userName<input type="text" id="username" size=5/></td>
    		<td>userPass<input type="password" id="userpass" size=5/></td>
    		<td><input type="button" value="Insert" id="btn2"/></td>
    	</tr>
    </table>
    <br>
    Update
	<table cellpadding="0" cellspacing="0" border="1">
		<tr>
			<td>输入编号:<input type="text" id="updateId" /></td>
		</tr>
		<tr>
			<td>userName:<input type="text" id="updateUserName"/></td>
		</tr>
		<tr>
			<td>userPass:<input type="text" id="updateUserPass"/></td>
		</tr>
		<tr><td align="center"><input type="button" id="btn3" value="Update" /></td></tr>
	</table>    
    <br>
    Delete
    <table cellpadding="0" cellspacing="0" border="1">
    	<tr>
    		<td>输入编号：</td>
    		<td><input type="text" id="deleteId" /></td>
    		<td><input type="button" id="btn4" value="Delete" /></td>
    	</tr>
    </table>
    
    
    
    
  </body>
</html>
